<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<view style="margin-top: 30rpx;padding:0 30rpx;background-color: #fff;">
			<view class="flex justify-between align-center"
				style="border-bottom:1rpx solid rgba(30,30,30,0.1);height: 116rpx;">
				<view class="avatar">
					头像
				</view>
				<view class="flex align-center" v-if="type != 2" @click="getAvatar(Information.image)">
					<u-avatar :src="Information.image" size="50" style="margin-right: 10rpx;"></u-avatar>
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
				<view class="flex align-center" v-if="type == 2" @click="getAvatar(Information.logo)">
					<u-avatar :src="Information.logo" size="50" style="margin-right: 10rpx;"></u-avatar>
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
			</view>
			<view class="flex justify-between align-center"
				style="border-bottom:1rpx solid rgba(30,30,30,0.1);height: 116rpx;">
				<view class="avatar">
					名字
				</view>
				<view class="flex align-center" @click="getName(userName)">
					<view style="margin-right: 10rpx;">{{userName}}</view>
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
			</view>
			<view v-if="type != 2" class="flex justify-between align-center"
				style="border-bottom:1rpx solid rgba(30,30,30,0.1);height: 116rpx;">
				<view class="avatar">
					性别
				</view>
				<view class="flex align-center" @click="getSex(gender)">
					<view style="margin-right: 10rpx;" v-if="gender == 0">未知</view>
					<view style="margin-right: 10rpx;" v-if="gender == 2">女</view>
					<view style="margin-right: 10rpx;" v-if="gender == 1">男</view>
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
			</view>
			<view class="flex justify-between align-center"
				style="border-bottom:1rpx solid rgba(30,30,30,0.1);height: 116rpx;">
				<view class="avatar">
					个性签名
				</view>
				<view class="flex align-center" @click="getSignature(signature)">
					<view
						style="margin-right: 10rpx;text-align: right;width: 400rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
						{{signature}}
					</view>
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
			</view>
			<view v-if="type == 4" class="flex justify-between align-center" style="height: 116rpx;">
				<view class="avatar">
					生日
				</view>
				<view class="flex align-center" @click="getBirthday(birthday)">
					<view style="margin-right: 10rpx;">{{birthday}}</view>
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
			</view>
			<view v-if="type == 2" class="flex justify-between align-center"
				style="border-bottom:1rpx solid rgba(30,30,30,0.1);height: 116rpx;">
				<view class="avatar">
					修改密码
				</view>
				<view class="flex align-center" @click="editPasswd()">
					<image src="../../static/2068.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
				</view>
			</view>
			<!-- 弹窗 -->
			<uni-popup id="popup" ref="sheet" type="center" :animation="true">
				<view style="background-color: #ECECECFF;margin:0 30rpx;border-radius: 10rpx;">
					<view style="padding: 30rpx;">
						<view class="title_a">
							工厂账号
						</view>
						<view class="flex">
							<input style="width: 420rpx;" type="text" v-model="editInformation.phone" class="input"
								placeholder="请输入您的手机号码">
							<el-button style="width: 240rpx;height:82rpx;border:none;background-color: #409eff;color: #fff;border-radius: 3px;line-height: 82rpx;text-align: center;
					" @click="getCountdown" :disabled="totalTime <60">{{content}}</el-button>
						</view>
						<view class="title_a">
							验证码
						</view>
						<input type="text" class="input" v-model="editInformation.code" placeholder="验证码">
						<view class="title_a">
							新密码
						</view>
						<input type="safe-password" class="input" v-model="editInformation.configPassword"
							placeholder="请输入您的新密码">
						<view class="flex justify-between" style="margin: 30rpx 0;">
							<button @click="cancel()" style="background-color: #ECECECFF;color: #1E1E1E4D;">取消</button>
							<button @click="edit()" style="background-color: #409eff;color: #fff;">确定</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "个人信息",
					back: true,
					color: "#111111",
					rightSlot: true,
					backgroundColor: [1, "#FFFFFF"],
				},
				editInformation: {
					phone: '',
					code: '',
					configPassword: ''
				},
				Information: [],
				birthday: '',
				userName: '',
				gender: '',
				signature: '',
				type: '',
				signCode: '',
				content: '发送验证码',
				totalTime: 60
			}
		},
		onLoad() {
			this.type = this.$cache.get('type')
		},
		onShow() {
			this.person()
		},
		methods: {
			// 发送验证码
			getCountdown() {
				let data = {
					phone: this.editInformation.phone
				}
				this.$api.sendCode(data).then((res) => {
					this.signCode = res.data.result
					console.log('密码', this.signCode)
					let clock = setInterval(() => {
						this.content = this.totalTime + 's后重新发送';
						this.totalTime--;
						if (this.totalTime < 0) {
							this.totalTime = 60;
							this.content = "重新发送验证码";
							clearInterval(clock);
						}
					}, 1000)
				})
			},
			// 修改密码
			edit() {
				let data = {
					signCode: this.signCode,
					code: this.editInformation.code,
					newPwd: this.editInformation.configPassword
				}
				this.$api.editPassword(data).then((res) => {
					this.$refs.sheet.close()
					console.log('修改密码', res)
				})
			},
			// 修改密码弹窗
			editPasswd() {
				this.$refs.sheet.open()
			},
			// 关闭弹窗
			cancel() {
				this.$refs.sheet.close()
			},
			// 个人信息
			person() {
				this.$api.person().then((res) => {
					this.Information = res.data.result
					this.userName = this.Information.userName
					this.gender = this.Information.sex
					this.signature = this.Information.signature
					this.editInformation.phone = res.data.result.phone
					if (this.type == 1 || this.type == 3) {
						this.userName = this.Information.name
						this.gender = this.Information.gender
						this.signature = this.Information.signature
					} else if (this.type == 2) {
						this.userName = this.Information.shopsName
						this.signature = this.Information.introduction
					}

					if (this.Information.birthday == null) {
						this.birthday = '未知'
					} else {
						this.birthday = this.$tools.fileTime(this.Information.birthday).slice(0, 11)
					}
				})
			},
			// 修改头像
			getAvatar(e) {
				this.$tools.goPageNoAuth('../../../clientEnd/page/Information/avatar?data=' + JSON.stringify(
					encodeURIComponent(e)))
			},
			// 修改姓名
			getName(e) {
				this.$tools.goPageNoAuth('../../../clientEnd/page/Information/editName?userName=' + e)
			},
			// 修改性别
			getSex(e) {
				this.$tools.goPageNoAuth('../../../clientEnd/page/Information/editSex?sex=' + e)
			},
			// 修改个性签名
			getSignature(e) {
				this.$tools.goPageNoAuth('../../../clientEnd/page/Information/editSignature?signature=' + e)
			},
			// 修改生日
			getBirthday(e) {
				this.$tools.goPageNoAuth('../../../clientEnd/page/Information/editBirthday?birthday=' + e)
			}
		}
	}
</script>

<style scoped>
	.title_a {
		margin: 30rpx 0 10rpx;
		font-size: 32rpx;
		text-align: left;
	}

	.input {
		width: 660rpx;
		height: 82rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(73, 45, 34, 0.1);
		padding: 20rpx;
	}

	button {
		width: 200rpx;
		height: 82rpx;
	}
</style>
